<template>
  <div class="service">
    <!-- 服务保障 -->
    <section class="section_box10 scroll" data-index="10" id="10">
      <span class="big_title flexcc">服务保障</span>
      <p class="hint">高强度线下实操与理论教学，精选的线上课程资源</p>
      <div class="content_box flexjs ">
        <div class="item_box flexccc">
          <span class="ico_logo flexcc"
            ><img src="imgs/service_logo1.png" alt=""
          /></span>
          <p>官方授权</p>
          <p>
            株洲数字工业创新中心为<br />
            ABB、西门子国际认证中心
          </p>
        </div>
        <div class="item_box flexccc">
          <span class="ico_logo flexcc"
            ><img src="imgs/service_logo2.png" alt=""
          /></span>
          <p>真机实操</p>
          <p>
            全新实训设备<br />
            真实项目集训<br />
            小班制教学
          </p>
        </div>
        <div class="item_box flexccc">
          <span class="ico_logo flexcc"
            ><img src="imgs/service_logo3.png" alt=""
          /></span>
          <p>技术支持</p>
          <p>
            一对一线下指导<br />
            帮助学员解决后续工作瓶颈<br />
            不定期分享交流经验
          </p>
        </div>
        <div class="item_box flexccc">
          <span class="ico_logo flexcc"
            ><img src="imgs/service_logo4.png" alt=""
          /></span>
          <p>复学进修</p>
          <p>
            课程有效期间支持免费复学1次<br />
            （住宿自理）<br />
            巩固专业技能知识
          </p>
        </div>
        <div class="item_box flexccc">
          <span class="ico_logo flexcc"
            ><img src="imgs/service_logo5.png" alt=""
          /></span>
          <p>就业推荐</p>
          <p>
            加入技成数字化工业人才库<br />
            优先推荐合作大厂名企
          </p>
        </div>
        <div class="item_box flexccc">
          <span class="ico_logo flexcc"
            ><img src="imgs/service_logo6.png" alt=""
          /></span>
          <p>住宿无忧</p>
          <p>
            提供精致人才公寓，环境优雅<br />
            配套齐全，专人管理，安全放心
          </p>
        </div>
        <div class="item_box flexccc">
          <span class="ico_logo flexcc"
            ><img src="imgs/service_logo7.png" alt=""
          /></span>
          <p>国企背景</p>
          <p>
            株洲国投教育投资<br />
            技成培训15年线上教育经验
          </p>
        </div>
        <div class="item_box flexccc">
          <span class="ico_logo flexcc"
            ><img src="imgs/service_logo8.png" alt=""
          /></span>
          <p>时间灵活</p>
          <p>
            以周为单位模块化学习<br />
            每月开课，支持按需预约
          </p>
        </div>
      </div>
    </section>
  </div>
</template>
<script>
export default {
  name: 'service-bar'
}
</script>
<style lang="scss">
@import "./../assets/scss/mixin.scss";
.service {
  padding: 33px 0;
  color: #666666;
  font-size: 16px;
  section[class^="section_box"] {
    .big_title {
      position: relative;
      height: 47px;
      font-size: 36px;
      font-weight: 700;
      line-height: 47px;
      letter-spacing: 0.25px;
      color: #1c1c28;
      text-align: center;
    }

    .big_title::before {
      content: "";
      width: 30px;
      height: 23px;
      margin-right: 20px;
      background: url(/imgs/ico_title_left.png) no-repeat;
      background-size: 100%;
    }

    .big_title::after {
      content: "";
      width: 30px;
      height: 23px;
      margin-left: 20px;
      background: url(/imgs/ico_title_right.png) no-repeat;
      background-size: 100%;
    }

    .hint {
      margin-top: 12px;
      height: 32px;
      font-size: 24px;
      line-height: 32px;
      letter-spacing: 0.25px;
      color: #28293d;
      text-align: center;
    }
  }
  .section_box10 {
    position: relative;
    width: 1226px;
    margin-right: auto;
    margin-left: auto;

    .content_box {
      width: 100%;
      flex-wrap: wrap;
      align-content: space-evenly;
      margin-top: 60px;

      .item_box {
        width: 25%;
        text-align: center;

        .ico_logo {
          width: 88px;
          height: 88px;
          padding: 14px;
          background: linear-gradient(
            155.98deg,
            #6bb5ff 21.46%,
            #0b7ff2 76.55%
          );
          box-shadow: 0px 10px 20px rgba(0, 0, 0, 0.04),
            0px 2px 6px rgba(0, 0, 0, 0.04), 0px 0px 1px rgba(0, 0, 0, 0.04);
          border-radius: 200px;
          border: 12px solid #d9ecff;
        }

        p {
          margin-top: 12px;
          height: 32px;
          font-size: 24px;
          line-height: 32px;
          color: #28293d;
        }

        p:last-child {
          margin-top: 12px;
          min-height: 54px;
          font-size: 14px;
          line-height: 18px;
          text-align: center;
          color: #606266;
        }
      }

      .item_box:nth-of-type(n + 5) {
        margin-top: 36px;
      }
    }
  }
}
</style>